<html>
<!DOCTYPE html>
<head>
    <title>标签管理</title>
		<#include "/header.html">
</head>
<style>
.form-horizontal {
    width: 750px;
    padding-top: 40px;
    margin: 0 auto;
}
.btn-default {
    color: #444;
    background-color: #fafafa;
    border-color: #ddd;
    width: 75px;
}
</style>
<body>
<div id="rfidGetVue" v-cloak>
    <div style="width: 70%;float: left;" id="leftDiv">
        <div class="panel panel-default" id="ckDiv">
            <div class="panel-heading">串口连接</div>
            <div style="padding: 25px 0 20px 10px;">
                <div class="col-sm-1 control-label" style="text-align: right;line-height: 30px;">串口</div>
                <div class="col-sm-5">
                    <select class="form-control" v-model="comName">
                        <option value="-1">-请选择-</option>
                        <option v-for="item in comList" :value="item">{{item}}</option>
                    </select>
                </div>
                <div v-show="!ipConnect">
                    <input type="button" :class="['layui-btn',comConnect?'layui-btn-disabled':'layui-btn-normal']" value="连接" @click="connectCom(true)"/>
                    <input type="button" class="layui-btn layui-btn-normal" value="关闭" @click="connectCom(false)"/>
                    <input type="button" class="layui-btn layui-btn-normal" value="刷新串口" @click="getCom()"/>
                </div>
                <div v-show="ipConnect">
                    <input type="button" class="layui-btn layui-btn-disabled" value="连接"/>
                    <input type="button" class="layui-btn layui-btn-disabled" value="关闭"/>
                    <input type="button" class="layui-btn layui-btn-normal" value="刷新串口" @click="getCom()"/>
                </div>
            </div>
        </div>
        <div class="panel panel-default" id="ipDiv">
            <div class="panel-heading">IP连接</div>
            <div style="padding: 10px 0 20px 10px;">
                <div class="col-sm-1 control-label" style="text-align: right;line-height: 30px;">端口</div>
                <div class="col-sm-1">
                    <input class="layui-input" v-model="serverPort" style="width: 60px;"/>
                </div>
            </div>
            <div style="padding: 25px 0 20px 10px;">
                <div class="col-sm-1 control-label" style="text-align: right;line-height: 30px;">服务器IP</div>
                <div class="col-sm-5">
                    <select class="form-control" v-model="IPName">
                        <option value="-1">-请选择-</option>
                        <option v-for="item in localIPList" :value="item">{{item}}</option>
                    </select>
                </div>
                <div v-show="!comConnect">
                    <!--<input id="ipConnectBtn" type="button" class="layui-btn layui-btn-normal" value="连接" @click="connectIp(true)"/>-->
                    <input id="ipConnectBtn" type="button" :class="['layui-btn',ipConnect?'layui-btn-disabled':'layui-btn-normal']" value="连接" @click="connectIp(true)"/>
                    <input type="button" class="layui-btn layui-btn-normal" value="关闭" @click="connectIp(false)"/>
                    <input type="button" class="layui-btn layui-btn-normal" value="刷新IP" @click="getServerIp()"/>
                </div>
                <div v-show="comConnect">
                    <input type="button" class="layui-btn layui-btn-disabled" value="连接"/>
                    <input type="button" class="layui-btn layui-btn-disabled" value="关闭"/>
                    <input type="button" class="layui-btn layui-btn-normal" value="刷新IP"@click="getServerIp()"/>
                </div>
            </div>
        </div>
    </div>
    <!--<div style="float: right;width: 25%;">-->
    <div :style="'float: left;width: 27%;margin-left: 2%;overflow:auto;height:'+clientListHeight+'px;'">
        <div id="clientDiv" class="panel panel-default">
            <div class="panel-heading">可连接的设备：<span>{{clientName}}</span></div>
            <div style="padding: 10px">
                <div style="margin:5px 10px 10px;">
                    <input type="button" class="layui-btn layui-btn-normal" value="轮巡检测" @click="patrolStart()"/>
                    <input type="button" class="layui-btn layui-btn-normal" value="停止检测" @click="patrolStop()"/>
                </div>
                <table class="ui-jqgrid-btable ui-common-table table table-bordered">
                    <tr>
                        <th><input type="radio" disabled></th>
                        <th><B>IP</B></th>
                        <th><B>PORT</B></th>
                        <th><B>DeveiceID</B></th>
                        <th><B>state</B></th>
                    </tr>
                    <tr v-show="clientListLen>0" v-for="client in clientList">
                        <td><input name="client" type="radio" :id="client.index" :ip="client.ip" @click="checkClient($event)"></td>
                        <td>{{client.ip}}</td>
                        <td>{{client.port}}</td>
                        <td>{{client.dev}}</td>
                        <td>{{client.state}}</td>
                    </tr>

                    <tr v-show="clientListLen==0">
                        <td colspan="5" style="text-align: center;">暂无数据</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="panel panel-default" :style="'height:'+dataDivHeight+'px;margin-top:10px;float:left;width:100%;'">
        <div class="panel-heading">设备返回的数据</div>
        <div :style="'overflow:auto;padding: 10px;height:'+(dataDivHeight-50)+'px;'" id="contentDiv">

        </div>
    </div>
</div>
<script src="${request.contextPath}/statics/js/modules/rfid/rfidGet.js"></script>
</body>
<style>
#clientDiv div table th,#clientDiv div table td{
    text-align: center;
}
</style>
</html>
